<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
        {{title}}
    </title>
    <link rel="stylesheet" href="/lib/layui-slider/css/layui.css">
    <style>
        body {
            margin: 15px 15px 15px 15px;
            background: #f2f2f2;
        }

        .layuimini-container {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
            background-color: #ffffff
        }

        .layuimini-main {
            margin: 10px 10px 10px 10px;
        }

        /**必填红点 */
        .layuimini-form>.layui-form-item>.required:after {
            content: '*';
            color: red;
            position: absolute;
            margin-left: 4px;
            font-weight: bold;
            line-height: 1.8em;
            top: 6px;
            right: 5px;
        }

        .layuimini-form>.layui-form-item>.layui-form-label {
            width: 120px !important;
        }

        .layuimini-form>.layui-form-item>.layui-input-block {
            margin-left: 150px !important;
        }

        .layuimini-form>.layui-form-item>.layui-input-block>tip {
            display: inline-block;
            margin-top: 10px;
            line-height: 10px;
            font-size: 10px;
            color: #a29c9c;
        }

        /**搜索框*/
        .layuimini-container .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }

        /**自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }

        ::-webkit-scrollbar-track {
            background-color: transparent;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #9c9da0;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em
        }

        .layui-top-box {
            padding: 40px 20px 20px 20px;
            color: #fff
        }

        .panel {
            margin-bottom: 17px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
        }

        .panel-body {
            padding: 15px
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 14px;
            color: inherit
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .layui-red {
            color: red
        }

        .main_btn>p {
            height: 40px;
        }

        .col-xs-6 {
            width: 100% !important;
        }

        .layui-top-box {
            padding: 0px !important;
            margin: 0px !important;
        }
    </style>
</head>

<body>
    <div id="viewport">
        {{include 'template/sidebar.html'}}
        <div id="content">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i></a>
                        </li>
                        <li>
                            <a href="#" class="admin-username">测试用户</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="container-fluid">

                <body>
                    <div class="layuimini-container">
                        <div class="layuimini-main layui-top-box">
                            <div class="layui-row layui-col-space10">

                                <div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3">
                                        <div class="panel layui-bg-cyan">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <span class="label pull-right layui-bg-blue">实时</span>
                                                    <h5>浏览次数</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h1 class="no-margins">123</h1>
                                                    <div class="stat-percent font-bold text-gray"><i
                                                            class="fa fa-commenting"></i> 123</div>
                                                    <small>包含重复浏览</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3">
                                        <div class="panel layui-bg-blue">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <span class="label pull-right layui-bg-cyan">实时</span>
                                                    <h5>用户统计</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h1 class="no-margins">34</h1>
                                                    <div class="stat-percent font-bold text-gray"><i
                                                            class="fa fa-commenting"></i> 34</div>
                                                    <small>不含管理员用户</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3">
                                        <div class="panel layui-bg-green">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <span class="label pull-right layui-bg-orange">实时</span>
                                                    <h5>新闻模块点击次数</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h1 class="no-margins">43</h1>
                                                    <div class="stat-percent font-bold text-gray"><i
                                                            class="fa fa-commenting"></i> 42</div>
                                                    <small>主要是接口的新闻源</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3">
                                        <div class="panel layui-bg-orange">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <span class="label pull-right layui-bg-green">实时</span>
                                                    <h5>采用的接口数量</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h1 class="no-margins">5</h1>
                                                    <div class="stat-percent font-bold text-gray"><i
                                                            class="fa fa-commenting"></i>5</div>
                                                    <small>同网站的多个接口算为多个</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-box">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md12">
                                    <blockquote class="layui-elem-quote main_btn">
                                        <p>本后台系统基于layui2.5.4以及font-awesome-4.7.0进行实现。koa开发文档地址：<a
                                                class="layui-btn layui-btn-xs layui-bg-blue" target="_blank"
                                                href="https://koa.bootcss.com/">koa文档</a></p>
                                        <p>产品名称：基于vue各城市疫情数据可视化系统，技术交流QQ群：668208380。</p>
                                        <p>实时性：前端能够实现数据实时刷新，配置Linux定时任务保证数据与当前疫情数据实时同步。</p>
                                        <p>安全性：通过更改mongoDB服务的默认配置、前后端rsa非对称加密、多种人机验证确实保障后端安全性。</p>
                                        <p>Gitee地址：<a href="https://gitee.com/nekojimmy/echarts_virtual"
                                                target="_blank"><img src="/img/gitee-star.svg" alt="star"></a> <a
                                                href="https://gitee.com/flying_dark_feather/epidemic_data_backend"
                                                target="_blank"><img src="/img/gitee-fork.svg" alt="fork"></a></p>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <script src="/lib/layui-slider/js/layui.js" charset="utf-8"></script>
        <script src="/js/jquery-3.5.1.min.js" charset="utf-8"></script>
        <script src="/lib/dream-msg/js/dream-msg.min.js"></script>
        <script src="/js/cookie-login.js"></script>
        <script>
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    $ = layui.$;

                //监听提交
                form.on('submit(saveBtn)', function (data) {
                    var index = layer.alert(JSON.stringify(data.field), {
                        title: '最终的提交信息'
                    }, function () {

                        // 关闭弹出层
                        layer.close(index);

                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);

                    });

                    return false;
                });

            });
        </script>
</body>

</html>